<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>尼恩信息交流</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        vertical-align: middle;
        /* text-align: center; */
      }
      body {
        padding: 10px;
        font-size: 16px;
      }
      .lp_textarea {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(244, 241, 241, 0.6);
        border-radius: 3px;
        border: none;
        outline: none;
        resize: none;
        width: 100%;
        height: 100%;
        display: inline-block;
        font-size: 18px;
        padding: 5px;
      }
      .textarea_container {
        position: relative;
        height: 100px;
        width: 100%;
        display: inline-block;
        cursor: text;
      }
      .textarea_container::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: calc(200% - 2px);
        width: calc(200% - 2px);
        transform: scale(0.5, 0.5);
        border: 1px solid black;
        transform-origin: 0 0;
        border-radius: 10px;
        z-index: -1;
      }
      .btn {
        display: inline-block;
        width: 100%;
        padding: 5px;
        border: none;
        outline: none;
        font-size: 16px;
        border-radius: 5px;
        background-color: green;
        color: white;
        margin-bottom: 5px;
      }
      .vip {
        overflow-x: auto;
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 3px;
        position: relative;
      }
      .vip::-webkit-scrollbar {
        /*滚动条整体样式*/
        height: 6px;
      }
      .vip::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 3px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        background: rgba(83, 83, 83, 0.4);
      }
      .vip::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        background: #ededed;
      }
      .vipImgCon {
        display: inline-block;
        flex: 0 0 5rem;
        height: 5rem;
      }
      .vipImgCon img {
        width: 100%;
        height: 100%;
      }
      h3 {
        text-align: center;
      }
    </style>
    <link rel="stylesheet" href="./css/index.css" />
    <script>
      if (!localStorage.getItem("token")) {
        window.location.href = "./index.html";
      }
    </script>
    <script src="./js/socket.io.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-polyfill/7.12.1/polyfill.js"></script>
  </head>
  <body>
    <div>
      <div class="title mb8">
        <div class="icon iconfont backBtn icon-fanhui"></div>
        <img
          src="http://www.aknien.net/static/img/newLogo.312db06b.png"
          alt=""
        />
        <h3>尼恩信息交流平台</h3>
      </div>
      <div>
        <div class="vip"></div>
        <div class="textarea_container mb8">
          <textarea
            class="lp_textarea"
            placeholder="友善发言，文明交友"
          ></textarea>
        </div>
        <button class="lp_submit btn">发布</button>
        <button class="setBtn btn">设置抽奖</button>
      </div>
    </div>
    <script src="./js/staitcFiled.js"></script>
    <script src="./js/back.js"></script>
    <script>
      let setBtn = document.querySelector(".setBtn");
      const authorization = "Bearer " + localStorage.getItem("token");
      window.addEventListener("load", () => {
        if (!localStorage.getItem("token")) {
          window.location.href = "./index.html";
          return;
        }
        fetch(`http://${baseUrl}:3000/user/info`, {
          headers: {
            authorization,
          },
        })
          .then((res) => res.json())
          .then((res) => {
            if (res.code === 200) {
              localStorage.setItem("userInfo", JSON.stringify(res.data));
              if (res.data.userName === "彭立辉") {
                setBtn.style.display = "inline-block";
              }
            } else {
              throw new Error(res.data);
            }
          })
          .catch((err) => {
            throw new Error(err);
          });
      });
      const socket = io(`ws://${baseUrl}:8080`, {
        auth: {
          token: "Bearer " + localStorage.getItem("token"),
        },
      });
      socket.on("open", () => {
        console.log("已连接");
      }); // mode参数 "Fill" | "AspectFill" | "AspectFit"

      setBtn.addEventListener("click", function () {
        window.location.href = "./luckyDrow.html";
      });
      let imgList = [
        {
          name: "ga6",
          url: "g6",
        },
        {
          name: "ga7",
          url: "g7",
        },
        {
          name: "ga8",
          url: "g8", // mode: "Fill",
        },
        {
          name: "ga9",
          url: "g9",
          range: {
            location: 36,
            length: 200,
          },
        },
        {
          name: "ga10",
          url: "g10",
          range: {
            location: 10,
            length: 200,
          },
        },
        {
          name: "ga11",
          url: "g11",
          mode: "AspectFill",
        },
        {
          name: "ga12",
          url: "g12",
        },
        {
          name: "ga14",
          url: "g14",
        },
        {
          name: "ga15",
          url: "g15",
          // mode: "AspectFill",
        }, // {
        //   name: "ga16",
        //   url: "g16",
        // },
        {
          name: "ga17",
          url: "g17",
        }, // {
        //   name: "ga18",
        //   url: "g18",
        // },
        // {
        //   name: "ga19",
        //   url: "g19",
        // },
        {
          name: "ga20",
          url: "g20",
        },
        {
          name: "ga21",
          url: "g21",
          // range: {
          //   location: 1,
          //   length: 9,
          // },
          // loops: 1,
        },
        {
          name: "ga22",
          url: "g22",
          // mode: "AspectFill",
        },
        {
          name: "ga23",
          url: "g23",
          // mode: "AspectFill",
        },
        {
          name: "ga24",
          url: "g24",
        },
        {
          name: "ga25",
          url: "g25",
          // mode: "AspectFill",
        },
        {
          name: "ga26",
          url: "g26",
        },
        {
          name: "ga27",
          url: "g27",
        },
        {
          name: "ga28",
          url: "g28",
          // mode: "AspectFill",
        },
        {
          name: "ga29",
          url: "g29",
          range: {
            location: 0,
            length: 90,
          },
        },
        {
          name: "ga30",
          url: "g30",
        },
        {
          name: "ga31",
          url: "g31",
          // mode: "AspectFill",
        },
        {
          name: "ga32",
          url: "g32",
          // mode: "Fill",
        },
      ];
      imgList.forEach((el) => (el.url = el.url + ".png"));
      const serveiceUrl = `http://${baseUrl}:3000/`;
      const timeInterval = 4;
      document.querySelector(".vip").innerHTML = `${imgList
        .map(
          (el) => `<div class="vipImgCon">
        <img data-name="${el.name}" data-location="${
            el.range && el.range.location
          }" data-length="${
            (el.range && el.range.length) || undefined
          }" data-mode="${
            el === null || el === void 0 ? void 0 : el.mode
          }" data-loops="${
            el === null || el === void 0 ? void 0 : el.loops
          }" src="${serveiceUrl + el.url}"  />
        </div>`
        )
        .join("")}`;
      let iv = document.querySelector(".lp_textarea");
      function sendMsg(data) {
        if (data.type !== "txt") {
          var _JSON$parse;
          data.userName =
            (_JSON$parse = JSON.parse(localStorage.getItem("userInfo"))) ===
              null || _JSON$parse === void 0
              ? void 0
              : _JSON$parse.userName;
        }
        socket.emit("onMsg", data);
      }
      let lp_submit = document.querySelector(".lp_submit");
      lp_submit.addEventListener("click", () => {
        sendMsg({
          data: iv.value.trim(),
          type: "txt",
        });
        let span = document.createElement("span");
        lp_submit.disabled = true;
        let timeStart = timeInterval;
        lp_submit.style.backgroundColor = "rgba(0, 128, 0, 0.5)";
        lp_submit.style.cursor = "not-allowed";
        let setTimer = () => {
          if (timeStart < 1) {
            clearInterval(timer);
            lp_submit.removeChild(span);
            timeStart = timeInterval;
            lp_submit.disabled = false;
            lp_submit.style.backgroundColor = "rgba(0, 128, 0, 1)";
            lp_submit.style.cursor = "default";
          } else {
            span.innerText = `(${--timeStart})`;
            lp_submit.appendChild(span);
          }
          return setTimer;
        };
        let timer = setInterval(setTimer(), 1000);
        iv.value = "";
      });
      let vip = document.querySelector(".vip");
      vip.addEventListener(
        "click",
        (e) => {
          e.preventDefault();
          e.stopPropagation();
          let div = document.createElement("div");
          vip.style.zIndex = -1;
          let timer = timeInterval;
          div.setAttribute(
            "style",
            "position:absolute;left:0;right:0;top:0;bottom:0;background-color:rgba(0,0,0,.2);color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;z-index:10;pointer-events: none;"
          );
          div.setAttribute("disabled", true);
          const updateTxt = () => {
            if (timer > 1) {
              div.innerText = `技能正在冷却(${--timer}s) `;
            } else {
              timer = timeInterval;
              clearInterval(interval);
              vip.removeChild(div);
              vip.style.zIndex = "inherit";
            }
            return updateTxt;
          };
          let interval = setInterval(updateTxt(), 1000);
          vip.appendChild(div);
          if (e.target.tagName === "IMG") {
            const { name, length, location, mode, loops } = e.target.dataset;
            let data = {
              type: "effects",
              name,
            };
            if (length !== "undefined") {
              Object.assign(data, {
                length,
                location,
              });
            }
            if (mode !== "undefined") {
              Object.assign(data, {
                mode,
              });
            }
            if (loops !== "undefined") {
              Object.assign(data, {
                loops,
              });
            }
            sendMsg(data);
          }
        },
        false
      );
    </script>
  </body>
</html>
